<template>
    <div class="order-detail-page">
        <div class="address-info-container">
            <div class="box">
                <div class="left">
                    <IconFont name="location2" color="#999" size="16"></IconFont>
                </div>
                <div class="center">
                    <div class="detail">{{ orderData?.address }}</div>
                    <div class="man-info">
                        <span class="linkman">{{ orderData?.linkman }}</span>
                        <span class="phone">{{ orderData?.phone }}</span>
                    </div>
                </div>
                <div class="right">
                    <!-- <IconFont name="rect-right" color="#999" size="16"></IconFont> -->
                </div>
            </div>

        </div>

        <div class="status-section">

            <div class="status-text">
                <p><span>订单号: {{ orderData.orderNumber }} </span> <span
                        style="background-color: #f7f8f9;padding: 2px;margin-left: 5px;"
                        @click="copy(orderData.orderNumber)">复制</span> </p>
            </div>
        </div>

        <!-- 商品信息 -->
        <div class="product-section">
            <div class="product-item">
                <img :src="orderData.productImage" :alt="orderData.productTitle" class="product-image">
                <div class="product-details">
                    <div class="product-title">{{ orderData.productTitle }}</div>
                    <div class="product-spec">{{ orderData.specialName }}</div>
                    <div class="product-price">¥{{ (orderData.realPrice / 100).toFixed(2) }} x {{ orderData.productCount
                        }}</div>
                </div>
            </div>
            <div class="servie-box" v-if="orderData?.productTags > 0 && orderData?.productTags.length > 0">
                <div v-if="orderData?.productTags.indexOf(1) !== -1" class="item">描述不符包退</div>
                <div v-if="orderData?.productTags.indexOf(2) !== -1" class="item">二十四小时发货</div>
                <div v-if="orderData?.productTags.indexOf(3) !== -1" class="item">四十八小时发货</div>
                <div v-if="orderData?.productTags.indexOf(4) !== -1" class="item">假货包赔</div>
            </div>
        </div>
        <div class="total-section">
            <!-- ¥{{ (orderData.realPriceAll / 100).toFixed(2) }}</span> -->
            <p>商品总额: <span> <nut-price :price="orderData?.realPriceAll / 100" size="normal" /></span></p>
        </div>
        <!-- 收货信息 -->



        <!-- 订单总金额 -->


        <!-- 操作按钮 -->

    </div>

</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, reactive, onMounted } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'

import * as orderApi from '../../api/order'
const router = Taro.useRouter()
const orderId = ref("")
const orderData = ref({})

onMounted(() => {
    orderId.value = router.params.orderId
    getDetail()
})
const copy = (text) => {
    Taro.setClipboardData({
        data: text, //要被复制的内容
        success: () => {
            //复制成功的回调函数
            Taro.showToast({
                //提示
                title: "复制成功",
                icon: "none",
            });
        },
    });
}
//获取订单详情
const getDetail = async () => {

    try {
        const { data, state, message } = await orderApi.OrderCommerceDetail({ orderId: orderId.value })
        if (state === 200) {
            console.log(data, "data");
            orderData.value = data

        } else {
            Taro.showToast({
                title: message,
                icon: 'none'
            })
        }
    } catch (error) {
        console.log(error, "error");
        Taro.showToast({
            title: "获取商品详情失败",
            icon: 'none'
        })
    }


}
</script>
<style lang="less">
.order-detail-page {
    font-family: Arial, sans-serif;
    padding-bottom: 60px;
    font-size: 24px;

    .address-info-container {
        border-bottom: 1px solid #f7f8f9;
        padding: 20px 20px;
        background-color: #fff;


        .box {
            display: flex;
            align-items: center;
            // justify-content: space-between;

            .center {
                font-size: 24px;
                width: 80%;
                text-align: left;

                .detail {
                    font-weight: 600;
                    font-size: 26px;
                }

                .man-info {
                    margin-top: 10px;

                    .linkman {}

                    .phone {
                        margin-left: 10px;
                    }

                }

            }

            .left {
                width: 10%;
            }

            .right {
                width: 10%;
            }
        }

    }

    .total-section {
        background-color: #fff;
        padding: 15px;
        text-align: right;
    }

    .product-section {
        background-color: #fff;
        margin-bottom: 10px;
    }

    .product-item {
        display: flex;
        padding: 15px;
    }

    .product-image {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 5px;
        margin-right: 10px;
    }

    .product-details {
        flex: 1;
        margin-left: 20px;
    }

    .product-details h3 {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .product-spec,
    .product-price {
        margin: 5px 0;
        color: #666;
    }

    .product-title {
        font-size: 26px;
        font-weight: 500;
    }

    .product-count {
        color: #999;
    }

    .status-section {
        display: flex;
        align-items: center;
        padding: 15px;
        background-color: #fff;
        margin-bottom: 10px;
    }

    .servie-box {
        display: flex;
        align-items: center;
        margin-top: 15px;
        padding: 0 10px;

        .item {
            color: #5232b7;
            // font-size: 24px;

        }

        .item:nth-child(n+2) {
            margin-left: 10px;
        }
    }

}
</style>
